import React, { useState, useEffect } from 'react';

// 函数组件 ClockFn 实现了一个简单的数字时钟，它每秒钟更新一次当前的时间
export default function ClockFn() {
    //使用 useState Hook 来管理组件内部的状态。初始状态是一个新的 Date 对象
    const [date, setDate] = useState(new Date());

    /*
     * 使用 useEffect Hook 来设置一个定时器，该定时器每秒调用一次 setDate 函数来更新当前时间。
     * 当组件卸载时，useEffect 的清理函数会被调用，清除定时器以防止内存泄漏
     */
    useEffect(() => {
        const timerID = setInterval(() => {
            setDate(new Date());
        }, 1000);

        return () => {
            clearInterval(timerID);
        };
    }, []);//// 依赖数组为空，表示只在组件挂载时运行一次

    //返回 JSX：在 return 语句中，返回一个带有背景颜色和其他样式的 div 元素。为了使文本在黑色背景上可见，设置了 color 样式为白色。
    return (
        <div style={{ backgroundColor: 'rgb(187 48 42)', color: '#fff', padding: '20px', textAlign: 'center' }}>
            <h1>我是一个小时钟</h1>
            <h2>现在是 {date.toLocaleTimeString()}.</h2>
        </div>
    );
}